import React, {useState, useEffect,} from 'react'
import {connect,} from 'react-redux'

// components
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton"
import FormInput from "../../../../shared-components/FormInput/FormInput"

// antd-mobile
import {WingBlank, Modal,} from "antd-mobile"
import './Nickname.css'
import LocalStorageService from "../../../../utils/LocalStorageService";

const Nickname = (props) => {
    const {
        userdetail,
        doChangeName,
    } = props

    const [newName, setNickname] = useState('')

    useEffect(() => {

        const userD = props.userdetail
        const flag = userD.initFlag
        const uid = LocalStorageService.get('userid')
        if (flag === 0) {
            props.fetchUserDetail({uid})
        }


    }, [])


    // const nicknameRef = useRef()
    const input = (
        <WingBlank>
            <FormInput
                value={newName}
                onChange={(e) => setNickname(e.target.value)}
                placeholder={`${userdetail.Nickname}`}
            />
        </WingBlank>
    )

    const changeName = async () => {
        const uid = localStorage.getItem('userid')
        const name = newName
        await doChangeName({uid, name,})
        setNickname('')
    }


    const showAlert = () => {

        // const
        // const Packet = JSON.parse(userdetail.Packet)
        // const firstTime = Packet.some(c => c[0] === 20001)
        //
        // if (firstTime) {
        //     return changeName()
        // }
        //
        // if (newName.length > 0 && newName.length <= 9  && !firstTime) {
        //
        //     Modal.alert(
        //         '',
        //         '是否支付50金币修改昵称？',
        //         [
        //             {text: '取消', onPress: () => console.log('cancel'), style: 'default'},
        //             {text: '支付', onPress: () => changeName(),},
        //         ]
        //     )
        //     return
        // }

        if (newName.length > 9) {
            Modal.alert(
                '',
                '昵称长度不可以超过9位',
            )
        }

        if (newName.length === 0) {
            Modal.alert(
                '',
                '新昵称不可以为空',
            )
        }


    }

    return (
        <>
            <div className='full-width-fff-background'>
                <GoBackLayout
                    title='修改昵称'
                    history={props.history}
                >
                    {input}
                </GoBackLayout>
            </div>
            <WingBlank>
                {/*<p className='tips nickname-tips'>提示： 新用户赠送一次免费修改昵称的机会； 普通用户需消费 50 金币/次； 会员终生免费修改昵称。</p>*/}
                <div style={{
                    marginTop: '80px',
                }}>
                    <CustomButton
                        onClick={changeName}
                        shadow='rgba(33,58,75,0.4) 0px 6px 10px 0px'
                    >
                        保存
                    </CustomButton>
                </div>

            </WingBlank>
        </>
    )
}

const mapStateToProps = ({user,}) => ({
    userdetail: user.userdetail,
})

const mapDispatchToProps = ({user,}) => ({
    doChangeName: (payload) => user.doChangeName(payload),
    fetchUserDetail: (id) => user.fetchUserDetail(id),

})

export default connect(mapStateToProps, mapDispatchToProps)(Nickname)

